<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
    :close-on-click-modal="false"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="上级部门" v-if="form.parentId != 0" prop="parentId">
        <treeselect
          v-model="form.parentId"
          :options="superdept"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="选择上级部门"
        />
      </el-form-item>
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="form.deptName" />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="form.orderNum" :min="1" :max="99"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { handleTree } from "@/utils/treeselectHandle";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { doAdd, doEdit, getList ,getdeptTree} from "@/api/departmentManagement";

export default {
  name: "DepartmentManagementEdit",
  components: { Treeselect },
  data() {
    return {
      superdept: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      form: {
        "id": undefined,
        "parentId": 1,
        "deptName": undefined,
        "orderNum": undefined
      },
      rules: {
        parentName: [
          { required: true, trigger: "blur", message: "请选择父节点" }
        ],
        name: [{ required: true, trigger: "blur", message: "请输入名称" }],
        order: [{ required: true, trigger: "blur", message: "请输入排序" }]
      },
      title: "",
      dialogFormVisible: false
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      };
    },
    async fetchData() {
      this.superdept = [];
      getdeptTree().then(Response => {
        this.superdept = Response.data;
      });
    },
    handleNodeClick(node) {
      this.form.parentName = node.name;
      this.form.parentId = node.id;
    },
    showEdit(row) {
      if (!row) {
        this.title = "添加";
        this.fetchData()
      } else {
        this.title = "编辑";
        this.form = Object.assign({}, row);
      }
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid && this.form.id) { //编辑
          console.log("编辑");
          console.log(this.form);
          const { message } = await doEdit(this.form);
          this.$baseMessage(message, "success", "vab-hey-message-success");
          this.$emit("fetch-data");
          this.close();
        } else if (valid && !this.form.id) { // 添加
          console.log("添加");
          console.log(this.form);
          const { message } = await doAdd(this.form);
          this.$baseMessage(message, "success", "vab-hey-message-success");
          this.$emit("fetch-data");
          this.close();
        }
      });
    }
  }
};
</script>
